<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo13-vue组件【动态Prop实例】</title>
  <script src="./js/vue.min.js"></script>

</head>

<body>
   <div id="app">
    <ol>
      <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
    </ol>
    <table id="table">
      <tr> <th>姓名</th><th>年龄</th></tr>
      <table-row v-for="item in rows"  v-bind:msg="item"></table-row>
    </table>
   </div>

</body>

<script type="application/javascript">
  Vue.component('todo-item',{
    props: ['todo'],
    template: '<li>{{todo.text}}</li>'
  });
  Vue.component('table-row',{
    props: ['msg'],
    template: '<tr> <td>{{msg.name}}</td><td>{{msg.age}}</td></tr>'
  })
  var vm = new Vue({
    el: "#app",
    data:{
      sites:[
        {text: 'runoob'},
        {text: 'google'},
        {text: 'baidu'}
      ],
      rows:[
        {name: '小明',age : 20},
        {name: '小大',age : 21},
        {name: '小小',age : 22},
      ]
    }
  });


</script>
</html>
